<template>
  <!-- 扫码盘点 -->
  <div class="repairs-form">

    <!-- 轮播图组件 -->
    <Carousel :assetInfoList="assetInfoList" />

    <!-- 数据 start -->
    <div class="repairs-box">
      <p class="b-title" v-if="!isdisabled">(必选)请选择盘点结果 <span class="text">请认真填写, 提交后无法修改</span></p>
      <p class="b-title" v-if="isdisabled">盘点结果</p>
      <van-form>
        <van-radio-group v-model="form.check_res" v-if="!isdisabled">
          <van-radio name="1" icon-size="18px">资产完好，正常使用中</van-radio>
          <van-radio name="2" icon-size="18px">已损坏，无法使用</van-radio>
          <van-radio name="3" icon-size="18px">资产维修中</van-radio>
        </van-radio-group>
        <!-- 盘点详情回显 start -->
        <van-field
          v-if="isdisabled"
          v-model="check_res"
          label="盘点结果:"
          disabled
          placeholder="盘点结果"
        />
        <!-- 盘点详情回显 start -->
        <div class="pt-10"></div>
        <van-field
          v-model="form.check_remark"
          type="textarea"
          placeholder="请输入盘点意见"
          rows="5"
          autosize
          required
          label="盘点意见:"
        />
        <div class="pt-10"></div>
        <!-- 上传图片 -->
        <van-field
          v-if="!isdisabled"
          label="上传图片"
          colon
          class="bt-10"
          required
        >
          <template #input>
            <div class="flex-box">
              <div>
                <van-uploader
                  :max-count="6"
                  v-model="form.check_url"
                />
              </div>
              <div class="tips">只支持上传6张图片</div>
            </div>
          </template>
        </van-field>
        <div class="pt-10"></div>
        <!-- 图片预览 -->
        <van-field
          v-if="image && image.length"
          label="图片详情"
          colon
          class="pt-14 pb-25 bt-10"
        >
          <template #input>
            <div class="img-wrapper">
              <van-image
                v-for="(item,index) in image"
                :key="index"
                width="80px"
                height="80px"
                class="mr-8 mb-10"
                :src="item.cd_image_url"
                @click="handleImagePreview(item.cd_image_url)"
              />
            </div>
          </template>
        </van-field>
        <div style="padding: 16px 16px 40px;background-color: #f8f9fd;" v-if="!isdisabled">
          <van-button block type="info" native-type="submit" @click="handleCreateInventory">
            提交盘点
          </van-button>
        </div>
      </van-form>
      <div style="height: 60px; background-color: #f8f9fd;"></div>
    </div>
    <!-- 数据 end -->

  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import Carousel from '@/components/Carousel';
import uploadMixins from '@/mixins/upload';
import { EDIT_TYPES } from '@/constant';

export default {
  name: 'repairs-form',
  mixins: [uploadMixins],
  components: {
    Carousel
  },
  props: ['$edit'],
  data () {
    return {
      EDIT_TYPES,
      check_res: '', // 盘点结果
      form: {
        id: '', // 记录ID
        check_res: '1', // 盘点结果：1完成，2损坏，3维修 4丢失
        check_remark: '', // 盘点意见
        check_url: [] // 盘点图片
      },
      image: [], // 盘点图片回显
      assetInfoList: {}, // 资产信息
      isdisabled: false // 是否可编辑
    };
  },
  methods: {
    // 获取资产信息详情,回显轮播图组件
    getAssetInfo () {
      let params = {
        id: this.$route.query.f_id
      };
      this.$api.getAssetInfo(params).then(res => {
        if (res.code === 0) {
          this.assetInfoList = res.result;
        }
      });
    },
    // 图片上传
    async handleUploadPicture (file) {
      // const url = await this.handleUploadToOSS(file);
    },
    // 图片预览
    handleImagePreview (images) {
      const imgArr = [images];
      ImagePreview(imgArr);
    },
    // 创建盘点
    handleCreateInventory  () {
      if (!this.form.check_remark) {
        this.$toast.fail('请填写盘点意见');
        return;
      }
      if (!this.form.check_url.length) {
        this.$toast.fail('请上传图片');
        return;
      }
      this.handleUploadFiles(this.form.check_url).then(urls => {
        let params = {
          id: this.$route.query.id,
          check_res: this.form.check_res,
          check_remark: this.form.check_remark,
          check_url: JSON.stringify(urls)
        };
        this.$api.postAssetCheckCheckResult(params).then(res => {
          if (res.code === 0) {
            this.$toast.success('提交盘点成功');
            this.$router.replace({
              name: 'inventory-detail',
              query: {
                id: this.$route.query.task_id
              }
            });
          }
        });
      });
    },
    // 获取盘点详情
    handleGetInventoryDetail () {
      const params = {
        id: this.$route.query.id
      };
      this.$api.getAssetCheckCheckDetail(params).then(res => {
        if (res.code === 0) {
          this.form.check_remark = res.result.check_remark;
          this.check_res = res.result.check_res;
          this.image = res.result.image;
        }
      });
    }
  },
  created () {
    this.getAssetInfo(); // 获取资产信息详情, 回显轮播图组件;
    if (this.$edit === EDIT_TYPES.DETAIL) {
      this.handleGetInventoryDetail(); // 获取盘点详情
      this.isdisabled = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.repairs-form {
  // 盘点数据
  .repairs-box {
    .b-title {
      color:#1B1B1C;
      font-size: 16px;
      padding: 12px 20px 12px 15px;
      background-color: #f8f9fd;
    }
    ::v-deep.van-field__label {
      width: 78px;
    }
    .pt-10 {
      height: 10px;
      background-color: #f8f9fd;
    }
    .tips {
      font-size: 12px;
      color: #C1C1C1;
    }
    .b-title {
      padding: 14px 15px;
      font-size: 14px;
      color: #1B1B1C;
      background-color:#f8f9fd;
    }
    .text {
      font-size: 12px;
      color: #AAAAAA;
      margin-left: 5px;
    }
  }
  ::v-deep {
    .van-radio {
      background-color: #fff;
      font-size: 14px;
      color: #101010;
      height: 50px;
      line-height: 50px;
      padding-left: 15px;
      border-bottom: 1px solid #f5f5f5;
    }
    .van-field__control--custom {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
